﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>杭州民宿网-账号密码登录</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta name="Keywords" content="杭州民宿预定">
    <meta name="Description" content="杭州民宿预定">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta content="width='device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;'" name="viewport" />
    <link rel="shortcut icon" type="image/x-icon" href="http://cdn.teemax.com.cn/hzminsu/images/favicon.ico" media="screen" />
    <link rel="stylesheet" type="text/css" href="http://cdn.teemax.com.cn/hzminsu/css/common.css">
    <!--[if lte IE 8]><link href="http://cdn.teemax.com.cn/hzminsu/css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if lte IE 7]><link href="http://cdn.teemax.com.cn/hzminsu/css/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
    <link rel="stylesheet" type="text/css" href="http://cdn.teemax.com.cn/hzminsu/css/user.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.teemax.com.cn/hzminsu/css/sweetalert.css" />

</head>
<body>
<div class="fullBody loginbg">
    <div class=" login">
        <div class="login_logo">
            <img src="http://cdn.teemax.com.cn/hzminsu/images/index/logo.png">
        </div>
        <div class="login_box loginbox js_userbox">
            <!--账号密码登录-->
            <div class="login_boxcon code_box">
                <div class="login_boxcon_center">
                    <div class="login_tab js_user_tab">
                        <ul>
                            <li class="act" >账号密码登录</li>
                            <li class="yanzheng">验证码登录</li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div id="loginDiv" class="login_form">
                        <form class="infoForm" >
                            <p class="account comm-margin">
                                <label>账&nbsp&nbsp&nbsp&nbsp号</label>
                                <input type="text" class="comminput user-name"  onchange="checkUsername()"  name="username" id="js_loginName" placeholder="输入手机号或邮箱">
                                <span class="tip js_errortip" id="usertextmsg"></span>
                            </p>
                            <p class="pwd comm-margin" id="pwdchange">
                                <label>密&nbsp&nbsp&nbsp&nbsp码</label>
                                <input type="password" class="comminput user-pwd" name="password" id="js_loginPwd" placeholder="输入密码" />
                                <i class="pwdstatus showpwd centericon"></i>
                                <span class="tip js_errortip"></span>
                            </p>
                            <!--				                <p class="code comm-margin" id="graphic-code" style="display:none">-->
                            <!--		            				<label>图形码</label>-->
                            <!--				                    <input type="text" id="js_picCode"  class="user-code" placeholder="输入图中字母">-->
                            <!--				                    <span class="tip js_errortip" ></span>-->
                            <!--				                     <input type="hidden" id="checkCode"  value="">-->
                            <!--				                    <input type="button" id="js_changeCode" class="checkcode" /> -->
                            <!--				                </p>-->
                            <p class="comm-margin">
                                <input type="button" id="js_accountLogin" class="submitReg" value="登录" />
                            </p>
                            <span style="color: red" id="errormsg"></span>
                        </form>
                        <p class="passtip">
                            <!-- <span class="remerber-pwd"><i class="icon remerbericon checked"></i>记住我</span> -->
                            <span class="register-now"><a href="regist">立即注册</a></span>
                            <span class="forget-pwd"><a href="resetpwd">忘记密码</a></span>
                        </p>
                    </div>
                    <div id="yanzhengma" class="login_form js_user_form" style="display:none;">
                        <form class="infoForm">
                            <p class="tel comm-margin">
                                <label>手机号</label>
                                <input type="text"  class="comminput tel-input" name="phoneNumber" id="js_userPhone" placeholder="输入手机号">
                                <span class="tip js_errortip" id="phonemsg"></span>
                            </p>
                            <p class="code comm-margin">
                                <label>验证码</label>
                                <input type="text" class="tel-code" id="js_phoneCode" placeholder="输入验证码">
                                <span class="tip js_errortip" ></span>
                                <!--通过ajax获取验证码，放入隐藏域中-->
                                <input type="hidden" id="code" value="">
                                <input type="button" class="getcode" id="js_getcode" value="短信获取">
                            <div class="clear"></div>
                            </p>
                            <p class="comm-margin">
                                <button type="button" id="js_phoneLogin" class="submitReg" >登录</button>
                            </p>
                            <span style="color: red" id="phoneerror"></span>
                        </form>
                        <p class="passtip">
                            <!-- <span class="remerber-pwd"><i class="icon remerbericon checked"></i>记住我</span> -->
                            <span class="register-now"><a href="regist">立即注册</a></span>
                            <span class="forget-pwd"><a href="resetpwd">忘记密码</a></span>
                        </p>
                    </div>
                </div>
            </div>
            <!--验证码登录-->
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="http://cdn.teemax.com.cn/hzminsu/js/sweetalert.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/require-config.js"></script>
<script type="text/javascript">

    <!--验证账号登录-->
    $("#js_accountLogin").click(function () {
        var username = $("#js_loginName").val();
        var password = $("#js_loginPwd").val();

        $.post("http://localhost:8989/SSOSERVER/user/login",
            {"username":username,"password":password},
            function (res) {
                if (res.ok) {
                    $("#errormsg").text("登录成功");
                    localStorage.setItem("token",res.data);
                    window.location.href="/index";
                } else {
                    $("#errormsg").text(res.error);
                }
            });
    })

    //切换为验证码登录
    $(".yanzheng").click(function(){
        $("#loginDiv").hide();
        $("#yanzhengma").show();
    })

    //切换为手机号登录
    $(".act").click(function(){
        $("#yanzhengma").hide();
        $("#loginDiv").show();
    })

    function checkPhone() {
        var phone = document.getElementById('js_userPhone').value;
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            $("#phonemsg").text("号码错误!");
            return false;
        }
    }

    //判断手机号或邮箱格式是否正确
    function checkUsername() {
        var text = document.getElementById('js_loginName').value;
        if(!(/^1[3456789]\d{9}$/.test(text))){
            if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(text))){
                $("#usertextmsg").text("账号错误!");
            }
        } else{
            $("#usertextmsg").text("");
        }
        return false;
    }

    //判断手机号是否存在
    $("#js_userPhone").blur(function () {
        var phone = $("#js_userPhone").val();
        $.post("http://localhost:8989/SSOSERVER/user/verify",
            {"userName":phone},
            function (res) {
                if (!res.ok) {
                    $("#phoneerror").text(res.error);
                }else{
                    $("#phoneerror").text("");
                }
            });
    })

    //通过Ajax获取验证码
    $("#js_getcode").click(function () {
        var phone = $("#js_userPhone").val();
        alert(phone);
        $.post("http://localhost:8989/SSOSERVER/user/loginByPhone",
            {"phone":phone},
            function (res) {
                if (res.ok) {
                    $("#code").val(res.data);
                }else{
                    $("#phoneerror").text(res.data);
                }
            });
    })

    //手机验证码登录
    $("#js_phoneLogin").click(function () {
        var code = $("#code").val();
        var inputCode = $("#js_phoneCode").val();
        if (code == inputCode){
            $("#phoneerror").text("验证成功！");
        }else {
            $("#phoneerror").text("验证码输入错误！");
        }
    })
</script>

